<template>
    <div>
        <div class="title">视频审核</div>
        <!-- 审核列表 -->
        <div v-show="isExam === false">
            <SelectBar :barData="['待审核','已审核']" @handleSelect="handleSelect"></SelectBar>

            <div style="background-color: #fff;width: 100%;">
                <div style="padding: 10px 10px 10px 10px; display: flex;">
                    <el-input placeholder="请输入视频编号/用户id" @click-suffix="search" suffix-icon="el-icon-search"
                        style="width: 300px;">
                    </el-input>
                </div>

                <!-- 表格 -->
                <div style="padding:10px;margin-bottom: 100px;margin-right:50px ;">
                    <el-table ref="multipleTable" border :data="resData" tooltip-effect="dark" style="width: 100%">

                        <el-table-column prop="id" label="视频编号" width="220">
                        </el-table-column>
                        <el-table-column prop="name" label="视频标题" width="280">
                        </el-table-column>
                        <el-table-column prop="author" label="作者" width="220">
                        </el-table-column>
                        <el-table-column prop="userId" label="用户id号" width="220">
                        </el-table-column>
                        <el-table-column prop="category" label="分类" width="120">
                        </el-table-column>
                        <el-table-column label="状态" width="120">
                            <template slot-scope="scope">
                                <span v-if="scope.row.status === 0" style="color:#DAA520">待审核</span>
                                <span v-if="scope.row.status === 1" style="color:#20da58">已审核</span>
                                <span v-if="scope.row.status === 2" style="color:#da2020">不符合要求</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="120">
                            <span class="handle" @click="viewExam()">查看</span>
                        </el-table-column>
                        <el-table-column label="多选" type="selection" width="55"> </el-table-column>


                    </el-table>
                    <el-pagination style="margin-top: 20px;" :page-size="100" layout="total, prev, pager, next"
                        :total="1000">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- 审核内容 -->
        <div v-show="isExam === true" class="box">
            <div class="title">{{ videoDetails.name }}</div>
            <el-container>
                <video width="757px" height="500px" controls="controls"  :src="videoDetails.video"></video>
                <el-form label-position="left" label-width="80px" style="margin-left: 20px;">
                    <el-form-item label="上传者">
                        <div class="words">
                            {{ videoDetails.author }}
                        </div>
                    </el-form-item>
                    <el-form-item label="视频格式">
                        <div class="words">
                            {{ videoDetails.format }}
                        </div>
                    </el-form-item>
                    <el-form-item label="上传时间">
                        <div class="words">
                            {{ videoDetails.uploadTime }}
                        </div>
                    </el-form-item>
                    <el-form-item label="视频分区">
                        <div class="words">
                            {{ videoDetails.category }}
                        </div>
                    </el-form-item>
                    <el-form-item label="视频标签">
                        <div class="words">
                            <el-tag v-for="item in videoDetails.tags" :key="item" style="margin-right: 10px;">{{ item }}</el-tag>
                        </div>
                    </el-form-item>
                    <el-form-item label="视频简介">
                        <div class="words">
                            {{ videoDetails.description }}
                        </div>
                    </el-form-item>
                </el-form>
            </el-container>
            <div style="margin: 10px 0 100px 20px;">
                <el-radio-group v-model="videoDetails.status">
                    <el-radio style="margin: 10px 10px;" :label="1">发布</el-radio>
                    <br/>
                    <el-radio style="margin: 10px 10px;" :label="2">退回</el-radio>
                    <el-input v-show="videoDetails.status===2" type="textarea"
                    :rows="4" placeholder="请输入退回原因"></el-input>
                </el-radio-group>
            </div>
            <div style="margin: 0px 0 10px 20px;">
                <el-button type="primary" @click="submit">确认</el-button>
                <el-button @click="isExam=false">取消</el-button>
            </div>
        </div>


    </div>
</template>

<script>
//待审核:0 已审核:1 不符合要求:2

import SelectBar from '@/components/SelectBar.vue'

export default {
    data() {
        return {
            selectIndex: 0,
            isExam: false,
            tableData: [
                {
                    id: 'AV20230413111', name: 'AR视频体验系列（一）之刺激过山车',
                    author: '我爱学习123', userId: '9552023413',
                    description: '这个视频很棒', category: 'AR',
                    video: `//www.douyin.com/aweme/v1/play/?video_id=v0200fg10000c8ia4ijc77udsnsnk0
                    fg&line=0&file_id=34d23d1953cc4a57b4cdfba2aae7e0ce&sign=d2
                    400a5561ddea07790cfb3bddefc6af&is_play_url=1&source=PackSourceEnum_MIX_AWEME&aid=6383`,
                    status: 0
                },
                {
                    id: 'AV20230413111', name: 'AR视频体验系列（一）之刺激过山车',
                    author: '我爱学习123', userId: '9552023413',
                    description: '这个视频很棒', category: 'AR',
                    video: `//www.douyin.com/aweme/v1/play/?video_id=v0200fg10000c8ia4ijc77udsnsnk0
                    fg&line=0&file_id=34d23d1953cc4a57b4cdfba2aae7e0ce&sign=d2
                    400a5561ddea07790cfb3bddefc6af&is_play_url=1&source=PackSourceEnum_MIX_AWEME&aid=6383`,
                    status: 0
                },
                {
                    id: 'AV20230413111', name: 'AR视频体验系列（一）之刺激过山车',
                    author: '我爱学习123', userId: '9552023413',
                    description: '这个视频很棒', category: 'AR',
                    video: `//www.douyin.com/aweme/v1/play/?video_id=v0200fg10000c8ia4ijc77udsnsnk0
                    fg&line=0&file_id=34d23d1953cc4a57b4cdfba2aae7e0ce&sign=d2
                    400a5561ddea07790cfb3bddefc6af&is_play_url=1&source=PackSourceEnum_MIX_AWEME&aid=6383`,
                    status: 1
                },
                {
                    id: 'AV20230413111', name: 'AR视频体验系列（一）之刺激过山车',
                    author: '我爱学习123', userId: '9552023413',
                    description: '这个视频很棒', category: 'AR',
                    video: `//www.douyin.com/aweme/v1/play/?video_id=v0200fg10000c8ia4ijc77udsnsnk0
                    fg&line=0&file_id=34d23d1953cc4a57b4cdfba2aae7e0ce&sign=d2
                    400a5561ddea07790cfb3bddefc6af&is_play_url=1&source=PackSourceEnum_MIX_AWEME&aid=6383`,
                    status: 2
                },
            ],
            videoDetails: {
                id: 'AV20230413111', name: 'AR视频体验系列（一）之刺激过山车',
                author: '我爱学习123', userId: '9552023413',
                description: '这个视频很棒', category: 'AR',
                video: `https://1259368925.vod2.myqcloud.com/68a7ff74vodcq1259368925/30bf824e387702292275154315/SWDnRxvHeisA.mp4`,
                status: 0,format:'MOV',
                tags: ['VR', '刺激', '视觉享受'], uploadTime: '2023-6-10 13:34:44'
            },
        }
    },

    computed: {
        resData() {
            if (this.selectIndex === 0) {
                return this.tableData.filter((cur) => {
                    return cur.status === 0
                })
            }
            return this.tableData.filter((cur) => {
                return cur.status !== 0
            })
        }
    },
    methods: {
        viewExam() {
            this.isExam = true
        },
        search() { },
        submit(){
            this.isExam=false
        },
        handleSelect(index){
            this.selectIndex=index
        }
    },
    components:{
        SelectBar
    }


}
</script>

<style scoped>
.title {
    font-size: larger;
    margin: 10px 10px 30px 0;
    /* font-family: Microsoft YaHei; */
}

.bar-father {
    display: flex;
    /* margin-left: 10px; */
}

.selected-bar {
    background-color: #fff;
    /* margin: 10px 10px; */
    padding: 5px 0px;
    border-bottom: #9370db solid 2px;
}

.bar {
    /* margin: 20px 20px; */
    padding: 15px 35px;
}

.bar-padding {
    background-color: #fff;
    border-radius: 5px 5px 0 0;
    padding: 10px 35px 15px 35px;
}

.handle {
    margin: 0 10px;
    color: #409EFF;
    /* 鼠标移上去有手形 */
    cursor: pointer
}

.box {
    width: 1200px;
    margin: 0px 10px 20px 10px;
    padding: 10px 10px 30px 10px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.words {
    margin: 0 10px 20px 10px;
}

.words::after {
    border: 1px solid #373737;
    width: 200px;
    height: 0;
}
</style>